<template>
	<view>
		<!-- <view class="gradient-bg1"></view> -->
		<headerNav :navRightIcon="false" leftIconColor="#fff" title="创建群聊" title-color="#ffffff"/>
		<view style="width: 92%;margin: 36rpx auto 20rpx;background-color: #FFFFFF;border-radius: 15rpx;padding: 20rpx 40rpx;box-sizing: border-box;position:relative;z-index: 1">
			<view style="width: 100%;padding-bottom: 20rpx">
				 <view style="line-height: 100rpx;display: flex;border-bottom: 1px solid #ECECEC;">
					 <view style="flex: 1;color: #333;font-size: 28rpx;">
						 群头像
					 </view>
					 <view v-if="groupChatAvatar" style="flex: 3;overflow: hidden;">
						 <image @click="chooseImage" :src="groupChatAvatar" style="width:64rpx;height: 64rpx;border-radius: 50%;display: block;float: right;margin-top: 18rpx;" mode=""></image>
					 </view>
					 <view @click="chooseImage" v-if="!groupChatAvatar" style="flex: 3;overflow: hidden;font-size: 28rpx;color: #666666;text-align: right;">
						请点击上传群头像
					 </view>
				 </view>
				 <view style="line-height: 100rpx;display: flex;justify-content: space-between" :class="xuanzhong.length>0?'as':'active'">
				 	<view style="flex: 1;color: #333;font-size: 28rpx;">
				 		群类型
				 	</view>
				 	<view @click="qun_leixing" style="color: #666666;font-size: 28rpx;text-align: right;" class="yihang flex items-center">
				 		<text v-if="xuanzhong.length==0">请选择类型</text>
						<text v-if="xuanzhong.length>0">已选择类型</text>
						<u-icon name="arrow-right" size="32rpx" color="#666"></u-icon>
				 	</view>
				 </view>
				 <view v-if="xuanzhong.length>0 && xuanzhong.length<=7" class="leixing" style="border-bottom: 1px solid #ECECEC;margin-top: 20rpx;">
				 	<text v-for="(item,index) in xuanzhong" :key='index' class="lx_active" style="display: inline-block;height: 60rpx;line-height: 60rpx;padding: 0 30rpx;font-size: 28rpx;border-radius: 30rpx;">
				 		{{item || ''}}
				 	</text>
				 </view>
				 <view v-if="xuanzhong.length>0 && xuanzhong.length>7" style="border-bottom: 1px solid #ECECEC;">
					 <view v-if="!xianshi" class="leixing" style="margin-top: 20rpx;">
					 	<text v-for="(item,index) in xuanzhong" :key='index' class="lx_active" style="display: inline-block;height: 60rpx;line-height: 60rpx;padding: 0 30rpx;font-size: 24rpx;border-radius: 30rpx;">
					 		{{item || ''}}
					 	</text>
					 	<view @click="zhankai" style="text-align: center;font-size: 26rpx;line-height: 60rpx;color: #333;">
					 		<text>收起</text>
					 	</view>
					 </view>
					 <view v-if="xianshi" class="leixing" style="margin-top: 20rpx;">
					 	<text v-for="(item,index) in xuanzhong.slice(0,7)" :key='index' class="lx_active" style="display: inline-block;height: 60rpx;line-height: 60rpx;padding: 0 30rpx;font-size: 24rpx;border-radius: 30rpx;">
					 		{{item || ''}}
					 	</text>
					 	<view @click="zhankai" style="text-align: center;font-size: 26rpx;line-height: 60rpx;color: #333;">
					 		<text>展开更多</text>
					 	</view>
					 </view>

				 </view>

				 <view style="line-height: 100rpx;display: flex;border-bottom: 1px solid #ECECEC;">
				 	<view style="flex: 1;color: #333;font-size: 28rpx;">
				 		群聊名称
				 	</view>
				 	<view style="flex: 3;color: #666666;font-size: 28rpx;" >
				 		<input v-model="name" type="text" style="width: 100%;height: 60rpx;padding: 20rpx 0;text-align: right;color:#262D2C;font-size:28rpx" placeholder-style="color:#666;" placeholder="请输入群名称">
				 	</view>
				 </view>
				 <view style="line-height: 100rpx;display: flex;border-bottom:1px solid #ECECEC">
				 	<view style="flex: 1;color: #333;font-size: 28rpx;">
				 		群介绍
				 	</view>
				 	<view style="flex: 3;color: #666666;font-size: 28rpx;" >
				 		<input v-model="jieshao" type="text" style="width: 100%;height: 60rpx;padding: 20rpx 0;text-align: right;color:#262D2C;font-size:28rpx" placeholder-style="color:#666;" placeholder="请输入群介绍" >
				 	</view>
				 </view>
				 <!-- <view style="line-height: 100rpx;display: flex;" :class="chengyuan.length>0?'as':'active'">
				 	<view style="flex: 1;color: #333;font-size: 32rpx;font-weight: 600;">
				 		群成员
				 	</view>
				 	<view @click="qun_chengyuan" style="flex: 3;color: #999;font-size: 28rpx;text-align: right;" class="yihang">
				 		<text v-if="chengyuan.length==0">请选择群成员</text>
				 		<text v-if="chengyuan.length>0">已选择群成员</text>
				 	</view>
				 </view>
				 <view  class="leixing" style="margin-top: 20rpx;">
				 	<text v-for="(item,index) in chengyuan" :key='index' class="lx_active" style="display: inline-block;height: 60rpx;line-height: 60rpx;padding: 0 30rpx;font-size: 24rpx;border-radius: 30rpx;">
				 		{{item || ''}}
				 	</text>
				 </view> -->
			</view>
		</view>

		<view @click="chuangjian" style="width: 690rpx;height: 90rpx;background: #1FB0AC;border-radius: 49rpx;line-height: 90rpx;text-align: center;color:#ffffff;font-size: 32rpx;font-weight: 600;margin:64rpx auto 0;">
			确定
		</view>
		<uploadImg :singleNum="true" ref="uploadImg" v-model="groupChatAvatar" permissionCameraContent="获取拍照权限是为了创建群聊" permissionAlbumContent="获取相册权限，是为了创建群聊" />
	</view>
</template>

<script>
import {baseUrl} from '@/common/setting.js'
console.log('%c [ baseUrl ]-94', 'font-size:13px; background:pink; color:#bf2c9f;', baseUrl)
	export default{
		data(){

			return{
				groupChatAvatar:'',
				category_id:[],
				category_id2:[],
				xuanzhong:[],
				name:'',
				jieshao:'',
				xianshi:false,
				chengyuan:[],
				client_ids:[]
			}
		},
		onLoad() {

		},
		methods:{
			zhankai:function(){
				this.xianshi=!this.xianshi
			},
			qun_leixing:function(){
				uni.navigateTo({
					url:'/sub/pages/qun_leixing?c1='+this.category_id.join(',')+'&c2='+this.category_id2.join(',')
				})
			},
			qun_chengyuan:function(){
				uni.navigateTo({
					url:'chengyuan'
				})
			},
			// 上传图片
			chooseImage() {
				this.$refs.uploadImg.open()
			},
			chuangjian:function(){
				let that=this
				if(this.groupChatAvatar==''){
					uni.showToast({
						title:'请上传群头像',
						icon:'none'
					})
					return
				}else if(this.xuanzhong.length<=0){
					uni.showToast({
						title:'请选择群类型',
						icon:'none'
					})
					return
				}else if(this.name==''){
					uni.showToast({
						title:'请填写群名称',
						icon:'none'
					})
					return
				}else if(this.jieshao==''){
					uni.showToast({
						title:'请填写群介绍',
						icon:'none'
					})
					return
				}else{
					let data={
						avatar:this.groupChatAvatar,
						name:this.name,
						introduction:this.jieshao,
						category_id:this.category_id.join(','),
						category_id2:this.category_id2.join(',')
					}
					console.log('%c [ data ]-186', 'font-size:13px; background:pink; color:#bf2c9f;', data)
					this.post('api/im/im/create_group',data,true).then(res=>{
						console.log(res)
						if(res.code==1){
							uni.showToast({
								title:res.msg,
								icon:'none'
							})
							// that.qun(res.data.group_id)
							// that.bindConfirmCreate()
							uni.navigateBack({
								delta:1
							})
						}else{
							uni.showToast({
								title:res.msg,
								icon:'none'
							})
						}
					})
				}

			},
			bindConfirmCreate() {
			  const promise = uni.$TUIKit.createGroup({
			    type: 'uni.$TUIKitTIM.TYPES.GRP_PUBLIC',
			    name: this.name
			    // groupID: this.groupID
			  });
			  promise
			    .then(imResponse => {
			      // 创建成功
			      // 创建的群的资料
			      const { groupID } = imResponse.data.group;
				  let aid='group'+imResponse.data.group
			      uni.navigateTo({
			        // url: `/im/chat/group_chat?conversationID=GROUP${groupID}`
					url: `/im/chat/group_chat?conversationID=${aid}`
			      });
			    })
			    .catch((err) => {
			      console.log(err,'err')
			      uni.showToast({
			        title: '群数量已达上限或该群组ID被使用',
			        icon: 'none'
			      });
			    });
			},

			qun:function(id){
				this.post('api/im/im/invite_member',{group_id:id,client_ids:this.client_ids.join(',')},true).then(res=>{
					console.log(res)
					if(res.code==1){
						uni.showToast({
							title: res.msg,
							icon: "none",
							duration: 1000
						})
						setTimeout(function(){
							uni.switchTab({
								url:'/pages/index/xiaoxi'
							})
						},1500)
					}else{
						uni.showToast({
							title: res.msg,
							icon: "none",
							duration: 1000
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #F5F5F5;
		padding-bottom: 40rpx;
		font-family: Demibold;
	}
	.leixing{
		overflow: hidden;
	}
	.leixing>.lx_active{
		margin-right: 14rpx;
		margin-bottom: 20rpx;
	}
	.lx_active{
		background-color: #E8F7F7;
		color: #1FB0AC;
	}
	.active{
		border-bottom: 1px solid #eee;
	}
	.as{
		border:none;
	}
</style>